import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import IconOpenTime from '@/assets/customer/opentime.png'
import toNative from '@/utils/toNative'

import { useBasicStore } from '@/stores/basic'
import { DeviceEnum } from '@/const/enum'
import type { CompanyInfoDto, EleSignInfoDto } from '@/api/company/types'
import RenderDescription, { type DescItemDto } from '@/components/render-descriotion/Index'
import { Image, Tag } from 'ant-design-vue'
@Component
export class BasicInfoView extends Render {
    @Prop() basicData!: EleSignInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto

    @Emit('refresh')
    handleRefresh() {}
    @Watch('basicData', { immediate: true })
    handleWatchBasicData() {
        // this.basicData?.companyId && this.getPeriodData()
    }

    basicStore = useBasicStore()

    get basicInfoData() {
        return [
            {
                label: '所属销售',
                value: this.basicData?.eleSaleName
            },
            {
                label: '剩余份数',
                value: this.basicData.eleAmount,
                suffix: '/份'
            },
            {
                label: '合同操作人',
                value: this.basicData.userName,
                suffix: (
                    <Tag class="ml-10px" color="primary">
                        {this.basicData.status ? '已激活' : '未激活'}
                    </Tag>
                )
            },
            {
                label: '身份证',
                value: this.basicData.idCardNo
            },
            {
                label: '手机号',
                value: this.basicData.phone
            }
        ] as DescItemDto[]
    }

    render() {
        return (
            <div>
                <div class="bg-white-dark-100 text-base px-12px py-8px mb-12px">基本信息</div>
                <div class="flex my-12px flex-wrap">
                    <div class="flex items-center">
                        <Image class="w-16px h-16px mr-6px" src={IconOpenTime}></Image>
                        <div>开通时间：{this.basicData.eleProductOpenTime}</div>
                    </div>
                    {this.basicData.isOpenEleSign ? <Tag color="primary">已开通</Tag> : <></>}
                </div>
                <RenderDescription renderData={this.basicInfoData} />
            </div>
        )
    }
}

export default toNative<
    { basicData: EleSignInfoDto; companyBasicInfo: CompanyInfoDto },
    { refresh: () => void }
        >(BasicInfoView)
